<template>
	<div class="dashboard-container flex flex-column">
		<div class="dashboard-header flex align-center">
			<img class="logo" src="@/static/桂林人民LOGO.png">
			<div class="title-box flex-auto" @click="jump" style="cursor: pointer">
				<div class="title">运营效率监控维度(效能引擎)</div>
				<div class="hospital-name">桂林市人民医院</div>
			</div>
			<div class="right-box flex align-center">
				<div class="time-box">
					<div class="current-time-label">当前时间</div>
					<div class="current-time-value">{{currentTime}}</div>
				</div>
				<div @click="drawer = true" style="cursor: pointer">
					<img class="avatar" src="@/static/角色图标.png">
					<div class="user-name">人云医疗智能体</div>
				</div>
			</div>
		</div>
		<div class="dashboard-main flex justify-content-space-between flex-auto" style="gap: 20px">
			<!-- 左侧容器-->
			<div ref="leftWrapper" class="left-wrapper flex-auto flex flex-column " style="gap: 20px">
				<div class="flex justify-content-space-between flex-auto" style="gap: 20px">
					<div class="left-content flex flex-column"
						style="width: 320px;padding: 20px;background-color: #1F2937;border-radius: 15px">
						<div class="title" style="color: #00968F;font-size: 19px;font-weight: 600;margin-bottom: 10px">实时效率监控</div>
						<div class="performance-metrics-container" style="overflow-y: auto; height: 455px; ">
							<div v-for="(item, index) in performanceMetrics" :key="index" class="metric-card"
								style="background-color: #374151;border-radius: 15px;padding: 15px 15px;margin-bottom: 10px;">
								<div class="flex justify-content-space-between align-center" style="margin-bottom: 10px;">
									<div class="flex align-center">
										<div style="margin-right: 10px;font-size: 16px;color: #eaeaec;letter-spacing: 1px">{{item.title }}
										</div>
										<!--                    <div :style="{ color: item.iconColor }" class="icon-wrapper" style="width: 24px;height: 24px;font-size: 20px;">{{ item.icon }}</div>-->
										<img class="icon-wrapper" style="width: 24px;height: 24px;font-size: 20px;" :src="item.icon" alt="">
									</div>
								</div>
								<!--     todo......  item.unit  单位需要确认，傻逼后端也不标记单位 -->
								<div style="font-size: 22px;font-weight: bold;color: #ffffff;margin-bottom: 5px;">{{ item.value }}
									{{ item.unit }}
								</div>
								<el-progress :color="item.progressBarColor" :percentage="item.progress" :show-text="false"
									:stroke-width="7" />
							</div>
						</div>
					</div>
					<div class="right-content flex-auto" style="display: flex;flex-direction: column">
						<div style="background-color: #1F2937;padding:10px 20px;border-radius: 15px;">
							<div class="title" style="color: #00968F;font-size: 19px;font-weight: 600;margin-bottom: 10px">资源效率指标
							</div>
							<div class="flex" style="gap: 20px">
								<div v-for="(item, index) in eChartsOptionsList" :key="index" class="flex-auto  flex flex-column"
									style="height: 200px;background-color: #374151;padding: 20px;border-radius: 10px">
									<div class="flex align-center justify-content-space-between" style="padding:0 0 10px 0">
										<div>{{item. title}}</div>
										<div style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px">
											{{item.data}}
										</div>
									</div>
									<ECharts :options="item.options" class="flex-auto" />
								</div>
							</div>
						</div>
						<div class="flex-auto flex justify-content-space-between" style="margin-top: 10px">
							<div class="flex-auto" style="margin-right: 10px;border: 2px solid #0e374c;border-radius: 15px">
								<ECharts :options="physicianWorkloadChartOptions" class="flex-auto" />
							</div>
							<div class="flex-auto flex flex-column justify-content-space-between "
								style="margin-left: 10px;padding: 20px;border: 2px solid #0e374c;border-radius: 15px;background-color: #0D2232">

								<div class="flex">
									<div class="flex-auto flex align-center">
										<img src="@/static/护士平均照床位数.png" style="width: 35px;height: 35px;display: block;margin-right: 10px;"
											alt="">
										<div style="font-size: 20px;font-weight: bolder">护士平均照床位数</div>
									</div>
									<div style="width: 120px">
										<div style="color: #AFCCCF;font-size: 16px;text-align: center">ICU</div>
										<div style="font-size: 24px;font-weight: bolder;text-align: center;margin-top: 10px">
											{{displayAVGNurseInfoRatio.icuNurseAvgBedCount}}
										</div>
									</div>
									<div style="width: 120px">
										<div style="color: #AFCCCF;font-size: 16px;text-align: center">普通病房</div>
										<div style="font-size: 24px;font-weight: bolder;text-align: center;margin-top: 10px">
											{{displayAVGNurseInfoRatio.ordinarNurseAvgBedCount}}
										</div>
									</div>
								</div>

								<div class="flex justify-content-space-between">
									<div class="flex">
										<img src="@/static/药师.png" style="width: 60px;height: 60px;margin-right: 20px;" alt="">
										<div class="flex flex-column justify-content-space-between">
											<div style="font-size: 20px;font-weight: bolder">每百床位药师配置</div>
											<div
												style="background-color: #2F968E;padding: 4px 10px;border-radius: 5px;width: fit-content;margin-top: 10px;">
												{{displayAVGNurseInfoRatio.pharmacistCount}}人 / 百床
											</div>
										</div>
									</div>
									<div class="flex">
										<img src="@/static/麻醉师.png" style="width: 60px;height: 60px;margin-right: 20px;" alt="">
										<div class="flex flex-column justify-content-space-between">
											<div style="font-size: 20px;font-weight: bolder">每百床位麻醉师配置</div>
											<div
												style="background-color: #2F968E;padding: 4px 10px;border-radius: 5px;width: fit-content;margin-top: 10px;">
												{{displayAVGNurseInfoRatio.anaesthetistCount}}人 / 百床
											</div>
										</div>
									</div>
								</div>
								<div class="flex justify-content-space-between align-center"
									style="width: 350px; margin: 0 auto;color: #C5E3E4">*
									数据更新于{{displayAVGNurseInfoRatio.displayUpdateYearTime}}年{{displayAVGNurseInfoRatio.displayUpdateMonthTime}}月
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="flex flex-column" style="background-color: #1F2937;height:250px;padding: 20px;border-radius: 15px">
					<div class="title" style="color: #00968F;font-size: 19px;font-weight: 600;margin-bottom: 10px">药品 / 耗材 / 设备
						周转分析</div>
					<div class="flex-auto flex justify-content-space-between" style="margin-top: 5px;">
						<div class=" flex-auto flex flex-column" style="border-radius: 10px">
							<div class="flex align-center justify-content-space-between"
								style="padding:10px;background-color: #374151;border-top-left-radius: 10px; border-top-right-radius:10px ">
								<div>药品占比 & 耗材占比</div>
								<div class="flex">
									<div style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px">药品
										{{drugAndMaterialRatioChartOptions.data.drugRatio}}%
									</div>
									<div
										style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px;margin-left: 10px">
										耗材 {{drugAndMaterialRatioChartOptions.data.revenueRatio}}%</div>
								</div>
							</div>
							<ECharts :options="drugAndMaterialRatioChartOptions.options" class="flex-auto" />
						</div>
						<div class=" flex-auto flex flex-column" style="margin: 0 20px">
							<div class="flex align-center justify-content-space-between"
								style="padding:10px;background-color: #374151;border-top-left-radius: 10px; border-top-right-radius:10px ">
								<div>库存周转天数</div>
								<div style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px">平均
									{{inventoryTurnoverChartOptions.data}}天
								</div>
							</div>
							<ECharts :options="inventoryTurnoverChartOptions.options" class="flex-auto" />
						</div>
						<div class=" flex-auto flex flex-column">
							<div class="flex align-center justify-content-space-between"
								style="padding:10px;background-color: #374151;border-top-left-radius: 10px; border-top-right-radius:10px ">
								<div>大型设备利用率</div>
								<div class="flex">
									<div style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px">CT
										{{materialCtChartOptions.series[0].data[0].value}}%
									</div>
									<div
										style="background-color: #00968F;border-radius: 5px;padding: 2px 5px;font-size: 14px;margin-left: 10px">
										MRI {{ materialMriChartOptions.series[0].data[0].value}}%</div>
								</div>
							</div>
							<div class="flex flex-auto">
								<ECharts :options="materialCtChartOptions" class="flex-auto" />
								<ECharts :options="materialMriChartOptions" class="flex-auto" />
							</div>
						</div>
					</div>
				</div>

				<div class="flex justify-content-space-between" style="background-color: #0F172A;gap: 20px">

					<div v-for="(card, index) in metricsCards" :key="index" class="flex flex-column flex-auto"
						style="background-color: #1F2937; border-radius: 15px; padding: 15px;">
						<div class="flex align-center" style="margin-bottom: 5px;">
							<!--              <div style="width: 24px; font-size: 20px; margin-right: 8px;">{{ card.icon }}</div>-->
							<img style="width: 24px; font-size: 20px; margin-right: 8px;" :src="card.icon" alt="">
							<div class="title" style="font-size: 16px; color: #ffffff; font-weight: bold;">{{ card.title }}</div>
						</div>
						<div v-for="(item, itemIndex) in card.items" :key="itemIndex"
							class="flex-auto flex justify-content-space-between" style="margin-bottom: 2px; font-size: 14px;">
							<div style="color: #eaeaec;">{{ item.label }}</div>
							<div :style="{ color: item.valueColor || '#00BFA5', fontWeight: 'bold' }">{{ item.value }}</div>
						</div>
					</div>

				</div>
			</div>
			<!-- 右侧容器-->
			<div class="right-wrapper flex flex-column"
				style="width: 370px;background-color: #15272A;border: 3px solid #0A2F3C;border-radius: 10px">
				<div class="real-time-warning-container flex flex-column" style="height: 410px">
					<div class="section-header flex align-center"
						style="padding-top: 10px;margin-left: 10px">
						<img alt="" src='@/static/实时预警.png' style="height: 20px;margin-right: 10px;">
						<span class="title"
							style="font-size: 18px;font-weight:400;letter-spacing: 1px;font-weight: bolder">实时预警</span>
					</div>
					<div class="flex-auto" style="margin-top: 10px; overflow-y: auto; padding:10px;">
						<div v-for="(item, index) in warningItems" :key="index" class="warning-card"
							style="background-color: #1F2937;border-radius: 10px;padding: 12px;margin-bottom: 15px;color: white;font-size: 14px;box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
							<div class="flex justify-content-space-between align-center">
								<div class="title" style="font-size: 18px; font-weight: bold; color: #FFA500;">{{ item.type }}</div>
								<div class="time" style="color: #00BFA5; font-size: 12px;">{{ item.time }}</div>
							</div>
							<div class="patient-info" style="margin-top: 10px; color: #ccc;">患者: {{ item.patient }}</div>
							<div class="operation-info" style="color: #eaeaec; margin-top: 10px;">{{ item.operation }}</div>
						</div>
					</div>
				</div>
				<!------------>
				<div class="ai-analysis-container flex-auto" style="display: flex;flex-direction: column;padding:0 10px;">
					<div class="section-header  align-center" style="padding-top: 10px;">
						<img alt="" src='@/static/AI建议.png' style="height: 20px;margin-right: 10px;">
						<span class="title"
							style="font-size: 18px;font-weight:400;letter-spacing: 1px;font-weight: bolder">AI分析建议</span>
					</div>
					<div style="overflow-y: scroll;height: 520px;">
						<div v-for="(item, index) in aiSuggestions" :key="index" class="ai-item">
							<div class="ai-title">{{ item.type }}</div>
							<div class="ai-desc">{{ item.title }}{{ item.content }}</div>
							<div class="ai-suggestion">{{ item.suggestion }}</div>
						</div>
					</div>

				</div>
				<!------------>

			</div>
		</div>
		<!-- 抽屉效果 -->
		<el-drawer v-model="drawer" :modal="true" size="800px" height="100vh" title="I am the title" class="custom-drawer"
			:with-header="false" @opened="opened">
			<div class="flex flex-column" style="height: 100%;padding: 20px;background-color: #ffffff">
				<div class="flex flex-column"
					style="background-color: #ffffff;color: #333333;font-size: 22px;font-weight: bolder">人云联拓·医疗智能体解决方案</div>
				<div v-if="isAiLoading" ref="outputRef" class="response-box flex-auto">
					<div class="ai-response-content" v-html="renderedHTML"></div>
					<span v-if="isStreaming" class="cursor">|</span>
				</div>
				<div v-else class="flex-auto flex flex-column align-center justify-content-center">
					<aiLoading></aiLoading>
				</div>
			</div>
		</el-drawer>
		<!---->
	</div>
</template>
<script setup>
	import {
		ref,
		onUnmounted,
		onMounted,
		nextTick
	} from 'vue'
	import ECharts from '@/components/ECharts.vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		useCurrentTime
	} from '@/hooks/useCurrentTime'
	import MarkdownIt from "markdown-it/index.mjs";
	import DOMPurify from "dompurify";
	import aiLoading from '@/components/aiLoading/index.vue';
	import {
		getDisplayAppointmentTimeFun,
		getDisplayAVGClinicFeeFun,
		getDisplayAVGDoctorInfoRatioFun,
		getDisplayAVGHHospitalRatioFun,
		getDisplayAVGHospitalizationDayFun,
		getDisplayAVGHospitalizationFeeFun,
		getDisplayAVGNurseInfoRatioFun,
		getDisplayCTorMRIRatioFun,
		getDisplayDepartMenRatioFun,
		getDisplayDicomInfoRatioFun,
		getDisplayDrugInfoRatioFun,
		getDisplayHHospitalSumFun,
		getDisplayPathologyInfoRatioFun,
		getDisplayPhysicalRatioFun,
		getDisplayWarehouseDayInfoRatioFun
	} from "@/api/efficiency/engine.js";
	const {
		currentTime
	} = useCurrentTime()
	const router = useRouter()
	const isAiLoading = ref(false);
	const jump = () => {
    router.push({path:"/NavPage"})
	}
	const performanceMetrics = ref([{
			title: '门诊预约等待',
			value: '42分钟',
			unit: '分钟',
			icon: new URL('@/static/3门诊等待.png', import.meta.url).href,
			iconColor: '#00BFA5',
			progress: 60,
			progressBarColor: '#00BFA5'
		},
		{
			title: '急诊滞留时间',
			value: '86分钟',
			unit: '分钟',
			icon: new URL('@/static/3急诊等待.png', import.meta.url).href,
			iconColor: '#EF4545',
			progress: 90,
			progressBarColor: '#EF4545'
		},
		{
			title: '住院检查等待',
			value: '28小时',
			unit: '小时',
			icon: new URL('@/static/3住院等待.png', import.meta.url).href,
			iconColor: '#F59E0B',
			progress: 40,
			progressBarColor: '#F59E0B'
		},
		{
			title: '术前平均住院',
			value: '3.2天',
			unit: '天',
			icon: new URL('@/static/3术前等待.png', import.meta.url).href,
			iconColor: '#10B981',
			progress: 70,
			progressBarColor: '#10B981'
		}
	]);
	const eChartsOptionsList = ref([{
			title: '门诊次均费用',
			data: '￥320',
			options: {
				tooltip: {
					trigger: 'item',
					formatter: function(params) {
						return `¥${params.value}元`;
					}
				},
				xAxis: {
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						color: '#ccc',
						formatter: '¥{value}'
					}
				},
				series: [{
						type: 'bar',
						data: [350, 340, 330, 325, 315, 310, 300, 310, 320, 315],
						itemStyle: {
							color: '#00bfa5' // 柱状图颜色
						},
						barWidth: '30%'
					},
					{
						type: 'bar',
						data: [370, 365, 360, 355, 345, 340, 335, 340, 350, 350],
						itemStyle: {
							color: '#787878'
						},
						barWidth: '30%',
						z: -1
					}
				],
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				backgroundColor: '#394151' // 背景颜色
			}
		},
		{
			title: '住院次均费用',
			data: '￥2000',
			options: {
				tooltip: {
					trigger: 'item',
					formatter: function(params) {
						return `¥${params.value}元`;
					}
				},
				xAxis: {
					type: 'category',
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
					// 去除 X 轴线
					axisLine: {
						show: false
					},
					// 去除 X 轴刻度线
					axisTick: {
						show: false
					},
					// 去除 X 轴分割线（默认就是 false，这里写出来更清晰）
					splitLine: {
						show: false
					},
					// 设置 X 轴文字样式（可选）
					axisLabel: {
						color: '#ccc'
					}
				},
				yAxis: {
					type: 'value',
					// 去除 Y 轴线
					axisLine: {
						show: false
					},
					// 去除 Y 轴刻度线
					axisTick: {
						show: false
					},
					// 去除 Y 轴分割线（这就是你要的“去除横线”）
					splitLine: {
						show: false
					},
					// 设置 Y 轴文字样式（可选）
					axisLabel: {
						color: '#ccc',
						formatter: '¥{value}'
					}
				},
				series: [{
						type: 'bar',
						data: [350, 340, 330, 325, 315, 310, 300, 310, 320, 315],
						itemStyle: {
							color: '#00bfa5' // 柱状图颜色
						},
						// 调整柱宽
						barWidth: '30%'
					},
					{
						type: 'bar',
						data: [370, 365, 360, 355, 345, 340, 335, 340, 350, 350],
						itemStyle: {
							color: '#787878' // 背景灰色柱状图颜色
						},
						barWidth: '30%',
						z: -1 // 置于底层
					}
				],
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				backgroundColor: '#394151' // 背景颜色
			}
		},
		{
			title: '平均住院日',
			data: '7.2天',
			options: {
				backgroundColor: '#394151', // 背景颜色
				tooltip: {
					trigger: 'axis',
					formatter: '{c}'
				},
				xAxis: {
					type: 'category',
					data: [],
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					},
					extraComponents: {
						line: [{
							type: 'line',
							shape: {
								x1: '0%',
								y1: 7,
								x2: '100%',
								y2: 7
							},
							style: {
								stroke: '#00bfa5',
								strokeDasharray: [4, 4],
								lineWidth: 2
							}
						}],
						// 新增绿色圆点
						symbol: [{
							type: 'circle',
							shape: {
								cx: '0%',
								cy: 7,
								r: 8
							},
							style: {
								fill: '#00bfa5'
							}
						}],
						// 新增绿色箭头
						arrow: [{
							type: 'path',
							shape: {
								d: 'M 0 0 L 15 -8 L 15 8 Z',
								x: '100%',
								y: 7,
								width: 20,
								height: 20
							},
							style: {
								fill: '#00bfa5'
							}
						}]
					}
				},
				series: [{
					type: 'line',
					data: [],
					itemStyle: {
						color: '#00bfa5'
					},
					lineStyle: {
						color: '#00bfa5',
						width: 2
					},
					symbol: 'circle',
					symbolSize: 8,
					showSymbol: true,
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: 'rgba(0, 191, 165, 0.3)'
								},
								{
									offset: 1,
									color: 'rgba(0, 191, 165, 0)'
								}
							]
						}
					}
				}],
				grid: {
					left: '5%',
					right: '0%',
					bottom: '0%',
					top: '10%',
					containLabel: true
				}
			}
		},
		{
			title: '床位使用率',
			data: '92.6%',
			options: {
				backgroundColor: '#394151', // 背景颜色
				tooltip: {
					trigger: 'axis',
					formatter: '{c}'
				},
				xAxis: {
					type: 'category',
					data: ['1月', '4月', '7月', '10月'],
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					},
					// 新增水平辅助线（绿色虚线）
					extraComponents: {
						line: [{
							type: 'line',
							shape: {
								x1: '0%',
								y1: 7,
								x2: '100%',
								y2: 7
							},
							style: {
								stroke: '#00bfa5',
								strokeDasharray: [4, 4],
								lineWidth: 2
							}
						}],
						// 新增绿色圆点
						symbol: [{
							type: 'circle',
							shape: {
								cx: '0%',
								cy: 7,
								r: 8
							},
							style: {
								fill: '#00bfa5'
							}
						}],
						// 新增绿色箭头
						arrow: [{
							type: 'path',
							shape: {
								d: 'M 0 0 L 15 -8 L 15 8 Z',
								x: '100%',
								y: 7,
								width: 20,
								height: 20
							},
							style: {
								fill: '#00bfa5'
							}
						}]
					}
				},
				series: [{
					type: 'line',
					data: [123, 31, 97, 75],
					itemStyle: {
						color: '#00bfa5'
					},
					lineStyle: {
						color: '#00bfa5',
						width: 2
					},
					symbol: 'circle',
					symbolSize: 8,
					showSymbol: true,
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: 'rgba(0, 191, 165, 0.3)'
								},
								{
									offset: 1,
									color: 'rgba(0, 191, 165, 0)'
								}
							]
						}
					}
				}],
				grid: {
					left: '0%',
					right: '0%',
					bottom: '0%',
					top: '10%',
					containLabel: true
				}
			}
		},
		{
			title: '床位周转次数',
			data: '1.2次',
			options: {
				backgroundColor: '#394151', // 背景颜色
				tooltip: {
					trigger: 'axis',
					formatter: '{c}'
				},
				xAxis: {
					type: 'category',
					data: ['1月', '4月', '7月', '10月'],
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisLabel: {
						color: '#ccc'
					},
					// 新增水平辅助线（绿色虚线）
					extraComponents: {
						line: [{
							type: 'line',
							shape: {
								x1: '0%',
								y1: 7,
								x2: '100%',
								y2: 7
							},
							style: {
								stroke: '#00bfa5',
								strokeDasharray: [4, 4],
								lineWidth: 2
							}
						}],
						// 新增绿色圆点
						symbol: [{
							type: 'circle',
							shape: {
								cx: '0%',
								cy: 7,
								r: 8
							},
							style: {
								fill: '#00bfa5'
							}
						}],
						// 新增绿色箭头
						arrow: [{
							type: 'path',
							shape: {
								d: 'M 0 0 L 15 -8 L 15 8 Z',
								x: '100%',
								y: 7,
								width: 20,
								height: 20
							},
							style: {
								fill: '#00bfa5'
							}
						}]
					}
				},
				series: [{
					type: 'line',
					data: [78, 72, 71, 70],
					itemStyle: {
						color: '#00bfa5'
					},
					lineStyle: {
						color: '#00bfa5',
						width: 2
					},
					symbol: 'circle',
					symbolSize: 8,
					showSymbol: true,
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
									offset: 0,
									color: 'rgba(0, 191, 165, 0.3)'
								},
								{
									offset: 1,
									color: 'rgba(0, 191, 165, 0)'
								}
							]
						}
					}
				}],
				grid: {
					left: '0%',
					right: '0%',
					bottom: '0%',
					top: '10%',
					containLabel: true
				}
			}
		}
	]);
	const physicianWorkloadChartOptions = ref({
		title: {
			text: '每名执业医师日均住院工作负担',
			textStyle: {
				color: '#ffffff',
				fontSize: 16,
				fontWeight: 'bold'
			},
			left: 'center',
			top: '11px'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			formatter: function(params) {
				const value = params[0].value;
				return `月份: ${params[0].name}<br/>工作负担: ${value}`;
			}
		},
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
			axisLabel: {
				color: '#ffffff',
				fontSize: 12,
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: '#303030'
				}
			},
			splitLine: {
				show: false
			}
		},
		yAxis: {
			type: 'value',
			interval: 0.5,
			axisLabel: {
				color: '#ffffff',
				fontSize: 12,
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: '#303030'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#303030'
				}
			}
		},
		series: [{
			name: '工作负担',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 8,
			lineStyle: {
				color: '#00BFA5'
			},
			areaStyle: {
				color: 'rgba(0, 191, 165, 0.3)'
			},
			itemStyle: {
				color: '#00BFA5'
			},
			data: [3.2, 3.0, 2.8, 2.6, 2.4, 2.2, 2.0, 2.1, 2.0, 1.8]
		}],
		grid: {
			left: '10%',
			right: '10%',
			bottom: '15%',
			top: '15%'
		},
		backgroundColor: '#0D2232'
	});
	const displayAVGNurseInfoRatio = ref({
		nurseAvgBedCount: "",
		icuNurseAvgBedCount: "", // ICU平均床位数
		ordinarNurseAvgBedCount: "", // 普通平均床位数
		pharmacistCount: "", // 药师人数
		anaesthetistCount: "", // 麻醉师人数
		displayUpdateYearTime: "", // 年
		displayUpdateMonthTime: "" // 月
	});

	const drugAndMaterialRatioChartOptions = ref({
		data: {
			drugRatio: null,
			revenueRatio: null
		},
		options: {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				formatter: function(params) {
					console.log("params", params)
					const value1 = params[0].value;
					const value2 = params[1].value;
					return `月份 : ${params[0].name}<br/>药品占比 : ${value1}%<br/> 耗材占比 : ${value2}%`;
				}
			},
			xAxis: {
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
				axisLabel: {
					color: '#ffffff',
					fontSize: 12,
					formatter: '{value}'
				},
				axisLine: {
					lineStyle: {
						color: '#303030'
					}
				},
				splitLine: {
					show: false
				}
			},
			yAxis: {
				type: 'value',
				min: 0,
				max: 100,
				interval: 20,
				axisLabel: {
					color: '#ffffff',
					fontSize: 12,
					formatter: '{value}%'
				},
				axisLine: {
					lineStyle: {
						color: '#303030'
					}
				},
				splitLine: {
					lineStyle: {
						color: '#303030'
					}
				}
			},
			series: [{
					name: '药品',
					type: 'bar',
					barWidth: '20%',
					itemStyle: {
						color: '#00BFA5'
					},
					data: [25, 24, 23, 22, 21, 20, 19, 18, 17]
				},
				{
					name: '耗材',
					type: 'bar',
					barWidth: '20%',
					itemStyle: {
						color: '#9a9595'
					},
					data: [20, 19, 18, 17, 16, 15, 14, 13, 12]
				}
			],
			grid: {
				left: '10%',
				right: '10%',
				bottom: '15%',
				top: '15%'
			},
			backgroundColor: '#374151'
		}
	});
	const inventoryTurnoverChartOptions = ref({
		data: 0,
		options: {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				formatter: function(params) {
					const value = params[0].value;
					return `月份: ${params[0].name}<br/>周转天数: ${value}天`;
				}
			},
			xAxis: {
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
				axisLabel: {
					color: '#ffffff',
					fontSize: 12,
					formatter: '{value}'
				},
				axisLine: {
					lineStyle: {
						color: '#303030'
					}
				},
				splitLine: {
					show: false
				}
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					color: '#ffffff',
					fontSize: 12,
					formatter: '{value}'
				},
				axisLine: {
					lineStyle: {
						color: '#303030'
					}
				},
				splitLine: {
					lineStyle: {
						color: '#303030'
					}
				}
			},
			series: [{
				name: '库存周转天数',
				type: 'line',
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
				lineStyle: {
					color: '#00BFA5'
				},
				areaStyle: {
					color: 'rgba(0, 191, 165, 0.3)'
				},
				itemStyle: {
					color: '#00BFA5'
				},
				data: [22, 20, 18, 17, 15, 14, 13]
			}],
			grid: {
				left: '10%',
				right: '10%',
				bottom: '15%',
				top: '15%'
			},
			backgroundColor: '#374151'
		}
	});
	const materialCtChartOptions = ref({
		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				return `${params.name}: ${params.value}%`;
			}
		},
		series: [{
			name: '大型设备利用率',
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true
				}
			},
			data: [{
					value: 42,
					name: 'CT',
					itemStyle: {
						color: '#00BFA5'
					}
				},
				{
					value: 58,
					name: '其他',
					itemStyle: {
						color: '#EF4545'
					}
				}
			],
			labelLine: {
				show: false
			}
		}],
		grid: {
			left: '10%',
			right: '10%',
			bottom: '15%',
			top: '15%'
		},
		backgroundColor: '#374151'
	});
	const materialMriChartOptions = ref({
		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				return `${params.name}: ${params.value}%`;
			}
		},
		series: [{
			name: '大型设备利用率',
			type: 'pie',
			radius: ['50%', '70%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: true
				}
			},
			data: [{
					value: 42,
					name: 'MRI',
					itemStyle: {
						color: '#00BFA5'
					}
				},
				{
					value: 58,
					name: '其他',
					itemStyle: {
						color: '#EF4545'
					}
				}
			],
			labelLine: {
				show: false
			}
		}],
		grid: {
			left: '10%',
			right: '10%',
			bottom: '15%',
			top: '15%'
		},
		backgroundColor: '#374151'
	});


	const metricsCards = ref([{
		icon: new URL('@/static/3科室效率.png', import.meta.url).href,
		title: '科室效率指标',
		items: [{
				label: '医师人均接诊时长',
				value: '8.2分钟',
				valueColor: '#00BFA5'
			},
			{
				label: '患者平均候诊时间',
				value: '32分钟',
				valueColor: '#00BFA5'
			},
			{
				label: '门诊号源使用率',
				value: '87.5%',
				valueColor: '#00BFA5'
			},
			{
				label: '复诊患者占比',
				value: '42.3%',
				valueColor: '#00BFA5'
			}
		]
	}, {
		icon: new URL('@/static/3检验质量.png', import.meta.url).href,
		title: '检验质量指标',
		items: [{
				label: '报告准确率',
				value: '99.1%',
				valueColor: '#00BFA5'
			},
			{
				label: '报告及时率',
				value: '95.3%',
				valueColor: '#00BFA5'
			},
			{
				label: '标本不合格率',
				value: '3.2%',
				valueColor: '#EF4545'
			}
		]
	}, {
		icon: new URL('@/static/3影像诊断.png', import.meta.url).href,
		title: '影像诊断指标',
		items: [{
				label: '诊断准确率',
				value: '98.7%',
				valueColor: '#00BFA5'
			},
			{
				label: '报告及时率',
				value: '92.5%',
				valueColor: '#00BFA5'
			},
			{
				label: '辐射安全合规率',
				value: '98.7%',
				valueColor: '#00BFA5'
			}
		]
	}, {
		icon: new URL('@/static/3病理相关.png', import.meta.url).href,
		title: '病理相关指标',
		items: [{
				label: '报告准确率',
				value: '99.3%',
				valueColor: '#00BFA5'
			},
			{
				label: '报告及时率',
				value: '96.8%',
				valueColor: '#00BFA5'
			},
			{
				label: '切片合格率',
				value: '97.5%',
				valueColor: '#00BFA5'
			}
		]
	}]);
	const warningItems = ref([{
			type: '高风险手术',
			time: '14:28',
			patient: '张伟(45岁)',
			operation: '心脏搭桥手术(ASA分级IV级)'
		},
		{
			type: '危重患者',
			time: '14:25',
			patient: '李娜(68岁)',
			operation: 'ICU脓毒症休克 APACHE II评分28'
		},
		{
			type: '高风险手术',
			time: '14:28',
			patient: '张伟(45岁)',
			operation: '心脏搭桥手术(ASA分级IV级)'
		},
		{
			type: '危重患者',
			time: '14:25',
			patient: '李娜(68岁)',
			operation: 'ICU脓毒症休克 APACHE II评分28'
		}, {
			type: '高风险手术',
			time: '14:28',
			patient: '张伟(45岁)',
			operation: '心脏搭桥手术(ASA分级IV级)'
		},
		{
			type: '危重患者',
			time: '14:25',
			patient: '李娜(68岁)',
			operation: 'ICU脓毒症休克 APACHE II评分28'
		}
	]);
	const metrics = ref([{
			label: '抗菌药物使用强度',
			value: '45.2/40 DDDs',
			progress: 113, // 超过100%时会显示为红色
			color: '#FF6B6B' // 红色
		},
		{
			label: 'I类切口预防用药率',
			value: '18%/20%',
			progress: 90,
			color: '#4CAF50' // 绿色
		},
		{
			label: '平均住院日',
			value: '7.2/7.5天',
			progress: 96,
			color: '#4CAF50' // 绿色
		}
	])
	const aiSuggestions = ref([{
			type: '病因分析',
			title: '监测I类切口手术感染率环比上升15%',
			content: 'AHP步分析主要与骨科病房区的术前预防性抗生素使用时机有关(30%病例未在术前0.5-1小时内给药)。',
			suggestion: '建议：立即对涉疫区进行专项督查，并加强手术流程培训。'
		},
		{
			type: '病种优化建议',
			title: 'UF39 呼吸系统感染/炎区 DRG组',
			content: '我院平均住院日比区域标杆长1.2天，但费用持平。',
			suggestion: '建议：分析临床路径，优化用药策略和出院流程，缩短住院日可提升床位周转率和收益。'
		},
		{
			type: '预测性预警',
			title: '根据近期病历质控评分下降趋势',
			content: '预计DRG入组错误率有上升风险。',
			suggestion: '建议：提前对编码员和临床医生进行针对性培训。'
		}
	])

	// ===========================  AI部分
	const drawer = ref(false)
	const isStreaming = ref(false);
	const renderedHTML = ref('');
	const outputRef = ref(null);
	const API_KEY = 'sk-69a5314907eb4feea7c1a371c6778a51'
	const API_URL = ref(
		'https://dashscope.aliyuncs.com/api/v2/apps/agent/f517943fe1ca4afa9d4b0e7f10172b34/compatible-mode/v1/responses');
	const md = new MarkdownIt({
		html: false,
		breaks: true,
		typographer: true
	})

	function detectAndConvertTextTable(text) {
		const lines = text.trim().split('\n')
		let headers = []
		let rows = []

		for (const line of lines) {
			const trimmed = line.trim()
			if (!trimmed) continue

			// 使用多个空格或制表符分割
			const cells = trimmed.split(/\s{2,}|\t/).filter(Boolean)
			if (cells.length < 2) continue // 至少两列

			// 判断是否为表头：不含明显数字/百分比
			const hasNumbers = /[\d\.]+%?/.test(trimmed)
			if (!headers.length && !hasNumbers) {
				headers = cells
			} else if (hasNumbers && cells.length >= headers.length) {
				// 数据行：补全或截断以匹配表头长度
				const row = cells.slice(0, headers.length)
				rows.push(row)
			}
		}

		// 构造 Markdown 表格
		if (headers.length >= 2 && rows.length >= 1) {
			const headerRow = '| ' + headers.join(' | ') + ' |'
			const separatorRow = '| ' + headers.map(() => '---').join(' | ') + ' |'
			const dataRows = rows.map(row => '| ' + row.join(' | ') + ' |').join('\n')
			return [headerRow, separatorRow, dataRows].join('\n')
		}

		return null
	}
	const originalRender = md.render.bind(md)
	md.render = function(content) {
		let enhancedContent = content
		// 查找可能的表格块（连续多行，每行有多个空格）
		const potentialBlocks = enhancedContent.match(/(?:^|\n)(?:[^\n]+\s+[^\n]+\n?)+/g)
		if (potentialBlocks) {
			potentialBlocks.forEach(block => {
				const cleanedBlock = block.trim()
				if (!cleanedBlock || cleanedBlock.startsWith('|') || cleanedBlock.includes('---')) return

				const tableMarkdown = detectAndConvertTextTable(cleanedBlock)
				if (tableMarkdown) {
					enhancedContent = enhancedContent.replace(cleanedBlock, tableMarkdown)
				}
			})
		}
		try {
			return originalRender(enhancedContent)
		} catch (e) {
			console.error('[Markdown] 渲染失败:', e)
			return `<p style="color:red">❌ 内容渲染错误</p>`
		}
	}

	// 内网访问
	const startStreamIntranet = async (requestData) => {
		if (isStreaming.value) return
		renderedHTML.value = ''
		isStreaming.value = true
		let accumulatedText = ''
		try {
			let payload = {
				question: requestData,
				type: 4
			};
			const response = await fetch('http://192.168.0.103:9907/api/Bailian/stream', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify(payload)
			})
			if (!response.ok) throw new Error(`HTTP ${response.status}: ${await response.text()}`)
			const reader = response.body.getReader()
			const decoder = new TextDecoder('utf-8')
			let buffer = ''
			isAiLoading.value = true
			while (true) {
				const {
					done,
					value
				} = await reader.read()
				if (done) break
				buffer += decoder.decode(value, {
					stream: true
				})
				const lines = buffer.split('\n')
				buffer = lines.pop()
				for (const line of lines) {
					const trimmed = line.trim()
					if (!trimmed.startsWith('data:')) continue

					const dataStr = trimmed.slice(5).trim()
					if (!dataStr || dataStr === '[DONE]') continue

					try {
						if (dataStr.includes('data:')) {
							const data = JSON.parse(dataStr.replace('data:', '').trim())
							if (data.type === 'response.output_text.delta' && typeof data.delta === 'string') {
								const deltaText = data.delta
								accumulatedText += deltaText
								console.log(data.delta)
								// 使用增强版 markdown-it 渲染（含表格修复）
								const unsafeHtml = md.render(accumulatedText)
								renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
								// 自动滚动到底部
								await nextTick()
								outputRef.value?.scrollTo?.(0, outputRef.value.scrollHeight)
							}
						}
					} catch (err) {
						console.warn('[解析失败]', err, dataStr)
					}
				}
			}
			const finalText = accumulatedText + '\n\n✅ 报告生成完成。'
			const unsafeHtml = md.render(finalText)
			renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
		} catch (error) {
			console.error('[请求失败]', error)
			renderedHTML.value = `<span style="color:red">❌ 请求失败：${error.message}</span>`
		} finally {
			isStreaming.value = false
		}
	}

	const startStream = async (requestData) => {
		if (isStreaming.value) return
		renderedHTML.value = ''
		isStreaming.value = true
		let accumulatedText = ''
		try {
			const payload = {
				input: [{
					type: 'message',
					role: 'user',
					content: [{
						type: 'input_text',
						text: requestData
					}]
				}],
				stream: true
			}
			console.log('API_URL :' + API_URL.value)
			console.log('API_KEY :' + API_KEY)
			const response = await fetch(API_URL.value, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${API_KEY}`
				},
				body: JSON.stringify(payload)
			})
			if (!response.ok) throw new Error(`HTTP ${response.status}: ${await response.text()}`)
			const reader = response.body.getReader()
			const decoder = new TextDecoder('utf-8')
			let buffer = ''
			while (true) {
				const {
					done,
					value
				} = await reader.read()
				if (done) break
				buffer += decoder.decode(value, {
					stream: true
				})
				const lines = buffer.split('\n')
				buffer = lines.pop()
				isAiLoading.value = true
				for (const line of lines) {
					const trimmed = line.trim()
					if (!trimmed.startsWith('data:')) continue

					const dataStr = trimmed.slice(5).trim()
					if (!dataStr || dataStr === '[DONE]') continue

					try {
						const data = JSON.parse(dataStr)
						if (data.type === 'response.output_text.delta' && typeof data.delta === 'string') {
							const deltaText = data.delta
							accumulatedText += deltaText
							// 使用增强版 markdown-it 渲染（含表格修复）
							const unsafeHtml = md.render(accumulatedText)
							renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
							// 自动滚动到底部
							await nextTick()
							outputRef.value?.scrollTo?.(0, outputRef.value.scrollHeight)
						}
					} catch (err) {
						console.warn('[解析失败]', err, dataStr)
					}
				}
			}
			const finalText = accumulatedText + '\n\n✅ 报告生成完成。'
			const unsafeHtml = md.render(finalText)
			renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
		} catch (error) {
			console.error('[请求失败]', error)
			renderedHTML.value = `<span style="color:red">❌ 请求失败：${error.message}</span>`
		} finally {
			isStreaming.value = false
		}
	}
	const opened = () => {
		isAiLoading.value = false;
		// todo。。。需要从已对接的接口中取值，改成动态参数
		//   const requestText = `门诊预约等待：42分钟，急诊滞留时间：86分钟，住院检查等待：28小时，术前平均住院：3.2 天，门诊次均费用：¥320，住院次均费用：¥5000，平均住院日：7.2天，床位使用率：92.5%
		// 床位周转次数：1.2次，护士平均照护床位：ICU 2.3张、普通病房 10.2张，每百床位药师配置：2.8人/百床，每百床位麻醉师配置：1.5人/百床，药品占比&耗材占比：药品28%、耗材35%，药品&耗材库存周转天数：平均15.2天，大型设备利用率：CT 42%、MRI 58%，门诊效率指标：医护人接诊时长指标：8.2分钟，患者平均诊查时间：32分钟，门诊资源使用率：87.5%，复诊患者占比：42.3%，检验质量指标：报告准确率：99.1%，报告及时率：95.3%，标本不合格率：3.2%，影像诊断指标：诊断准确率：98.7%，报告及时率：92.5%，辐射安全合规率：98.7%，病理相关指标：报告准确率：99.3%，报告及时率：96.8%，切片合格率：97.5%`;
		const requestText =
			`门诊预约等待：${performanceMetrics.value[0].value}分钟，
			急诊滞留时间：${performanceMetrics.value[1].value}分钟，
			住院检查等待：${performanceMetrics.value[2].value}小时，
			术前平均住院：${performanceMetrics.value[3].value}天，
			门诊次均费用：${eChartsOptionsList.value[0].data}，
			住院次均费用：${eChartsOptionsList.value[1].data}，
			平均住院日：${eChartsOptionsList.value[2].data}，
			床位使用率：${eChartsOptionsList.value[3].data}，
			床位周转次数：${eChartsOptionsList.value[4].data}，
			护士平均照护床位：ICU ${displayAVGNurseInfoRatio.value.icuNurseAvgBedCount}张、普通病房 ${displayAVGNurseInfoRatio.value.ordinarNurseAvgBedCount}张，
			每百床位药师配置：${displayAVGNurseInfoRatio.value.pharmacistCount}人/百床，
			每百床位麻醉师配置：${displayAVGNurseInfoRatio.value.anaesthetistCount}/百床，
			药品占比&耗材占比：药品${drugAndMaterialRatioChartOptions.value.data.drugRatio}%、耗材${drugAndMaterialRatioChartOptions.value.data.revenueRatio}%，
			药品&耗材库存周转天数：平均${inventoryTurnoverChartOptions.value.data}天，
			大型设备利用率：CT ${materialCtChartOptions.value.series[0].data[0].value}%、MRI ${materialMriChartOptions.value.series[0].data[0].value}%，
			门诊效率指标：医护人接诊时长指标：${metricsCards.value[0].items[0].value}分钟，
			患者平均诊查时间：${metricsCards.value[0].items[1].value}分钟，
			门诊资源使用率：${metricsCards.value[0].items[2].value}%，
			复诊患者占比：${metricsCards.value[0].items[3].value}%，
			检验质量指标：报告准确率：${metricsCards.value[1].items[0].value}%，
			报告及时率：${metricsCards.value[1].items[1].value}%，
			标本不合格率：${metricsCards.value[1].items[2].value}%，
			影像诊断指标：诊断准确率：${metricsCards.value[2].items[0].value}%，
			报告及时率：${metricsCards.value[2].items[1].value}%，
			辐射安全合规率：${metricsCards.value[2].items[2].value}%，
			病理相关指标：报告准确率：${metricsCards.value[3].items[0].value}%，
			报告及时率：${metricsCards.value[3].items[1].value}%，
			切片合格率：${metricsCards.value[3].items[2].value}%`;
		// 外网
		startStream(requestText)
		// 内网
		// startStreamIntranet(requestText)
	}
	// 数据更新-----------------------------------------------------
	const updateDashboardCharts = async () => {
		const results = await Promise.allSettled([
			getDisplayAppointmentTimeFun(),
			getDisplayAVGClinicFeeFun(),
			getDisplayAVGHospitalizationFeeFun(),
			getDisplayAVGHospitalizationDayFun(),
			getDisplayAVGHHospitalRatioFun(),
			getDisplayHHospitalSumFun(),
			getDisplayAVGDoctorInfoRatioFun(),
			getDisplayAVGNurseInfoRatioFun(),
			getDisplayDrugInfoRatioFun(),
			getDisplayWarehouseDayInfoRatioFun(),
			getDisplayCTorMRIRatioFun(),
			getDisplayDepartMenRatioFun(),
			getDisplayPhysicalRatioFun(),
			getDisplayDicomInfoRatioFun(),
			getDisplayPathologyInfoRatioFun()
		]);
		if (results[0].status == 'fulfilled' && results[0].value.data.code == 200) {
			performanceMetrics.value[0].value = results[0].value.data.data.clinicAppointmentTime;
			performanceMetrics.value[1].value = results[0].value.data.data.emergencyAppointmentTime;
			performanceMetrics.value[2].value = results[0].value.data.data.hospitalizationAppointmentTime;
			performanceMetrics.value[3].value = results[0].value.data.data.surgeryAppointmentTime;
		}
		if (results[1].status == 'fulfilled' && results[1].value.data.code == 200) {
			// console.log("results[1].value.data.data",results[1].value.data.data);
			// 接口数据不匹配，数据缺失......
			let xAxisData = [];
			let seriesData = [];
			eChartsOptionsList.value[0].data = '¥' + results[1].value.data.data.avgClinicFeeCount;
			results[1].value.data.data.displayAVGClinicFeeList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.clinicFeeCount);
			});
			eChartsOptionsList.value[0].options.xAxis.data = xAxisData;
			eChartsOptionsList.value[0].options.series[0].data = seriesData;
		}
		if (results[2].status == 'fulfilled' && results[2].value.data.code == 200) {
			// console.log("results[2].value.data.data",results[2].value.data.data);
			// 接口数据不匹配，数据缺失......
			let xAxisData = [];
			let seriesData = [];
			eChartsOptionsList.value[1].data = '¥' + results[2].value.data.data.avgHospitalizationFeeCount;
			results[2].value.data.data.displayAVGHospitalizationFeeList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.hospitalizationFeeCount);
			});
			eChartsOptionsList.value[1].options.xAxis.data = xAxisData;
			eChartsOptionsList.value[1].options.series[0].data = seriesData;
		}
		if (results[3].status == 'fulfilled' && results[3].value.data.code == 200) {
			let xAxisData = [];
			let seriesData = [];
			eChartsOptionsList.value[2].data = results[3].value.data.data.avgSurgicalCount + "天";
			results[3].value.data.data.displayAVGSurgicalDtoList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.surgicalDayCount);
			});
			eChartsOptionsList.value[2].options.xAxis.data = xAxisData;
			eChartsOptionsList.value[2].options.series[0].data = seriesData;
		}
		if (results[4].status == 'fulfilled' && results[4].value.data.code == 200) {
			let xAxisData = [];
			let seriesData = [];
			eChartsOptionsList.value[3].data = results[4].value.data.data.surgicalBedRatio + "%";
			results[4].value.data.data.displaySurgicalBedDtoList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.surgicalBedCount);
			});
			eChartsOptionsList.value[3].options.xAxis.data = xAxisData;
			eChartsOptionsList.value[3].options.series[0].data = seriesData;
		}
		if (results[5].status == 'fulfilled' && results[5].value.data.code == 200) {
			let xAxisData = [];
			let seriesData = [];
			eChartsOptionsList.value[4].data = results[5].value.data.data.surgicalBedNumberRatio + "次";
			results[5].value.data.data.surgicalBedNumberDtos.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.surgicalBedNumber);
			});
			eChartsOptionsList.value[4].options.xAxis.data = xAxisData;
			eChartsOptionsList.value[4].options.series[0].data = seriesData;
		}
		if (results[6].status == 'fulfilled' && results[6].value.data.code == 200) {
			let xAxisData = [];
			let seriesData = [];
			results[6].value.data.data.displayNurseInfoDtoList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.nurseCount);
			});
			physicianWorkloadChartOptions.value.xAxis.data = xAxisData;
			physicianWorkloadChartOptions.value.series[0].data = seriesData;
		}
		if (results[7].status == 'fulfilled' && results[7].value.data.code == 200) {
			displayAVGNurseInfoRatio.value = results[7].value.data.data;
		}
		if (results[8].status == 'fulfilled' && results[8].value.data.code == 200) {
			drugAndMaterialRatioChartOptions.value.data = {
				drugRatio: results[8].value.data.data.drugRatio,
				revenueRatio: results[8].value.data.data.revenueRatio
			};
			let xAxisData = [];
			let seriesData1 = [];
			let seriesData2 = [];
			results[8].value.data.data.drugRevenueDtoList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData1.push(item.drugMonthRatio);
				seriesData2.push(item.revenueMonthRatio);
			});
			drugAndMaterialRatioChartOptions.value.options.xAxis.data = xAxisData;
			drugAndMaterialRatioChartOptions.value.options.series[0].data = seriesData1;
			drugAndMaterialRatioChartOptions.value.options.series[1].data = seriesData2;
		}
		if (results[9].status == 'fulfilled' && results[9].value.data.code == 200) {
			let xAxisData = [];
			let seriesData = [];
			inventoryTurnoverChartOptions.value.data = results[9].value.data.data.avgDayCount;
			results[9].value.data.data.displayStockMonthInfoList.forEach((item) => {
				xAxisData.push(item.year + "-" + item.month);
				seriesData.push(item.stockDayCount);
			});
			inventoryTurnoverChartOptions.value.options.xAxis.data = xAxisData;
			inventoryTurnoverChartOptions.value.options.series[0].data = seriesData;
		}
		if (results[10].status == 'fulfilled' && results[10].value.data.code == 200) {
			materialCtChartOptions.value.series[0].data[0].value = results[10].value.data.data.ctRatio;
			materialCtChartOptions.value.series[0].data[1].value = 100 - results[10].value.data.data.ctRatio;
			materialMriChartOptions.value.series[0].data[0].value = results[10].value.data.data.mriRatio;
			materialMriChartOptions.value.series[0].data[1].value = 100 - results[10].value.data.data.mriRatio;
		}
		if (results[11].status == 'fulfilled' && results[11].value.data.code == 200) {
			metricsCards.value[0].items[0].value = results[11].value.data.data.avgppctRatio;
			metricsCards.value[0].items[1].value = results[11].value.data.data.avgpawtRatio;
			metricsCards.value[0].items[2].value = results[11].value.data.data.avgoruRatio;
			metricsCards.value[0].items[3].value = results[11].value.data.data.avgfprRatio;
		}
		if (results[12].status == 'fulfilled' && results[12].value.data.code == 200) {
			metricsCards.value[1].items[0].value = results[12].value.data.data.avgrarRatio;
			metricsCards.value[1].items[1].value = results[12].value.data.data.avgrtrRatio;
			metricsCards.value[1].items[2].value = results[12].value.data.data.avgsuqrRatio;
		}
		if (results[13].status == 'fulfilled' && results[13].value.data.code == 200) {
			metricsCards.value[2].items[0].value = results[13].value.data.data.avgrarRatio;
			metricsCards.value[2].items[1].value = results[13].value.data.data.avgrtrRatio;
			metricsCards.value[2].items[2].value = results[13].value.data.data.avgrscrRatio;
		}
		if (results[14].status == 'fulfilled' && results[14].value.data.code == 200) {
			metricsCards.value[3].items[0].value = results[14].value.data.data.avgrarRatio;
			metricsCards.value[3].items[1].value = results[14].value.data.data.avgrtrRatio;
			metricsCards.value[3].items[2].value = results[14].value.data.data.avgsqrrRatio;
		}
	};
	onMounted(() => {
		updateDashboardCharts();
	});
</script>
<style lang="less" scoped>
	.dashboard-container {
		width: 100%;
		height: 100%;
		background-color: #0F172AFF;
		font-family: 'Microsoft YaHei', sans-serif;
		color: var(--text-color);
		padding: 10px 20px;
		box-sizing: border-box;

		.dashboard-header {
			padding: 10px 0;

			.logo {
				width: 60px;
				height: 60px;

				border-radius: 50%;
			}

			.title-box {
				margin-left: 20px;

				.title {
					font-size: 21px;
					font-weight: bolder;
				}

				.hospital-name {
					font-size: 14px;
					padding-top: 5px;
					color: #818999;
				}
			}

			.right-box {
				.time-box {
					margin-right: 20px;

					.current-time-label {
						font-size: 12px;
						color: #818999;
					}

					.current-time-value {
						font-size: 18px;
						padding-top: 5px;
						font-weight: bolder;
					}

				}

				.avatar {
					width: 50px;
					height: 50px;

					border-radius: 50%;
					margin: 0 auto;
					display: block;
				}

				.user-name {
					font-size: 12px;
					padding-top: 5px;
					color: #818999;
				}
			}
		}

		.dashboard-main {
			margin-top: 10px;
		}
	}

	.right-wrapper {
		.ai-analysis-container {
			&.root-cause {
				border-left: 4px solid #F56C6CFF;
			}

			&.optimization {
				border-left: 4px solid #E6A23CFF;
			}

			&.prediction {
				border-left: 4px solid #409EFFFF;
			}

			// AI建议
			.ai-item {
				margin-top: 10px;
				padding: 10px;
				background-color: rgba(255, 255, 255, 0.08);
				border-radius: 6px;
				border-left: 4px solid #F56C6CFF;

				.ai-title {
					font-size: 18px;
					color: #fff;
					letter-spacing: 1px;
				}

				.ai-desc {
					font-size: 15px;
					color: #ccc;
					margin-bottom: 10px;
					line-height: 1.6;
					letter-spacing: 1px;
				}

				.ai-suggestion {
					font-size: 14px;
					color: #94979e;
					padding-left: 5px;
					line-height: 1.4;
				}
			}
		}
	}

	.warning-card {
		transition: all 0.3s ease;
		border-left: 4px solid #FFA500; // 橙色边框，对应“高风险手术”
		background-color: #1F2937;
		border-radius: 10px;
		padding: 12px;
		margin-bottom: 10px;
		color: white;
		font-size: 14px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
		}
	}

	.metrics-container {
		.metric-item {
			margin-bottom: 15px;
			border-radius: 8px;
			color: white;
		}

		.label {
			font-size: 16px;
			margin-bottom: 5px;
		}

		.value {
			font-size: 14px;

			margin-bottom: 5px;
		}

		.progress-bar {
			width: 100%;
		}
	}

	.ai-item {
		margin-top: 16px;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.08);
		border-radius: 6px;
		border-left: 4px solid #F56C6CFF;

		.ai-title {
			font-size: 15px;
			color: #fff;
			margin-bottom: 8px;
		}

		.ai-desc {
			font-size: 13px;
			color: #ccc;
			margin-bottom: 8px;
			line-height: 1.4;
		}

		.ai-suggestion {
			font-size: 13px;
			color: #94979e;
			padding-left: 5px;
			line-height: 1.4;
		}
	}

	.echart-container {
		border-bottom-left-radius: 10px !important;
		border-bottom-right-radius: 10px !important;
		border-top-left-radius: 0px !important;
		border-top-right-radius: 0px !important;
	}

	// ================================
	::v-deep(.el-drawer) {
		background-color: rgba(12, 16, 19, 0.91);
	}

	::v-deep(.el-drawer__body) {
		padding: 0px
	}

	.response-box {
		width: 100%;
		padding: 16px;
		overflow-y: auto;
		line-height: 1.7;
		font-size: 15px;
		background-color: #ffffff;
		color: #333333;
	}

	/* ==================== 富文本样式 ==================== */
	.ai-response-content h1,
	.ai-response-content h2,
	.ai-response-content h3 {
		margin: 1em 0 0.5em;
		color: #07173b;
	}

	.ai-response-content h1 {
		font-size: 1.8em;
		text-align: center;
	}

	.ai-response-content h2 {
		font-size: 1.5em;
		border-left: 4px solid #007bff;
		padding-left: 12px;
	}

	.ai-response-content h3 {
		font-size: 1.3em;
		color: #34495e;
	}

	:global(.ai-response-content table) {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
		font-size: 0.95em;
		border: 1px solid #2c2a2a;
	}

	:global(.ai-response-content th,
		.ai-response-content td) {
		border: 1px solid #ccc;
		padding: 8px 12px;
		text-align: center;
	}

	:global(.ai-response-content th) {
		background-color: #f0f5ff;
		font-weight: 600;
		color: #1a3b6d;
	}

	:global(.ai-response-content tr:nth-child(even)) {
		background-color: #f9f9f9;
	}

	:global(.ai-response-content p) {
		margin: 0.6em 2;
	}

	:global(.ai-response-content ul) {
		margin-left: 40px;
		margin: 0.6em 1;
		padding-left: 1;
	}

	:global(.ai-response-content ol) {
		margin-left: 40px;
		margin: 0.6em 2;
		padding-left: 2;
	}

	:global(.ai-response-content li) {
		margin: 0.6em 1.2;
		padding-left: 20px;
	}

	.cursor {
		animation: blink 1.2s step-end infinite;
		color: #007bff;
		font-weight: bold;
		font-size: 1.1em;
	}

	:global(.ai-message table) {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
		font-size: 0.95em;
	}

	:global(.ai-message th,
		.ai-message td) {
		border: 1px solid #ccc;
		padding: 6px 10px;
		text-align: left;
	}

	:global(.ai-message th) {
		background-color: #f0f5ff;
		font-weight: 600;
	}

	:global(.ai-message tr:nth-child(even)) {
		background-color: #f9f9f9;
	}

	@keyframes blink {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}
</style>